<template>
  <div class="breadcrumb-wrap" v-if='breadcrumbData.length > 0'>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: item.butRule }" v-for='item in breadcrumbData'>{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        breadcrumbData: []
      }
    },
    watch: {
      $route () {
        this.updateBreadcrumbData()
      }
    },
    methods: {
      updateBreadcrumbData () {
        // 先检查route的meta信息是否含有breadcrumbData
        // 如果有设置breadcrumbData，
        // 如果没有，检查一下vuex里面menuArr是否包含有相应的路由信息，如果有
        // 计算后设置当前的route.meta.breadcrumbData
        // 如果不能计算，则当前vm.breadcrumbData设置为[],不显示面包屑导航
        let routeMetaBreadcrumbData = this.$route.meta.breadcrumbData
        let menuArr = this.$store.state.menu.menuArr
        let curPath = this.$store.state.route.path
        if (routeMetaBreadcrumbData && routeMetaBreadcrumbData.length > 0) {
          this.breadcrumbData = routeMetaBreadcrumbData
          return
        }
        let result = menuArr.find((item) => {
          return item.butRule === curPath
        })
        // 暂时只支持二级目录
        if (result) {
          let parentId = result.presId
          let parent = menuArr.find((item) => {
            return item.resId === parentId
          })
          let metaBreadcrumbData = []
          metaBreadcrumbData.push({
            butRule: parent.butRule,
            name: parent.resName
          })
          metaBreadcrumbData.push({
            butRule: result.butRule,
            name: result.resName
          })
          this.$route.meta.breadcrumbData = metaBreadcrumbData
          this.breadcrumbData = metaBreadcrumbData
          return
        }
        this.breadcrumbData = []
      }
    }
  }
</script>

<style>
  .breadcrumb-wrap{
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E0E6ED;
    /*padding: 24px;*/
  }
</style>
